<template>
    <view class="detail-container">
        <!-- 新闻标题区域 -->
        <view class="article-header">
            <view class="title">特朗普对华态度缓和！承认美对自华进口商品关税过高 预计将大幅降低</view>
            <view class="subtitle">特朗普团队表示将重新评估对华关税政策，寻求更平衡的贸易关系</view>
            <view class="meta-info">
                <view class="source">来源：刘明烨</view>
                <view class="datetime">2025-04-22 09:45:00</view>
            </view>
        </view>

        <!-- 正文内容区域 -->
        <view class="article-content">
            <view class="lead">路透社华盛顿4月22日电：</view>
            <view class="paragraph">美国前总统特朗普近日在接受采访时表示，他承认现任政府时期对中国商品加征的关税"可能过高"，并表示如果他再次当选，将重新评估这些关税政策，预计会"大幅降低"部分商品的关税税率。</view>
            <image class="content-image" src="/static/4.jpg" mode="widthFix"></image>
            <view class="image-caption">特朗普在竞选集会上谈及对华贸易政策（路透社记者 摄）</view>
            <view class="paragraph">特朗普在福克斯新闻的专访中表示："我们在贸易上取得了很多成就，但有些关税可能设置得过高了。我们需要与中国保持竞争，但也需要务实的贸易关系。"</view>
            
            <view class="paragraph">据知情人士透露，特朗普的经济团队正在制定新的对华贸易政策方案，核心内容包括：</view>
            <view class="paragraph">1. 对消费品类关税平均降低30%-50%</view>
            <view class="paragraph">2. 维持高科技领域产品的保护性关税</view>
            <view class="paragraph">3. 建立更灵活的关税调整机制</view>
            
            <image class="content-image" src="/static/7.jpg" mode="widthFix"></image>
            <view class="image-caption">中美贸易代表近期多次会晤（美联社资料图）</view>
            
            <view class="paragraph">中国商务部发言人对此回应称："中方注意到美方有关表态，我们始终认为贸易战没有赢家，希望美方与中方相向而行，推动中美经贸关系健康稳定发展。"</view>
        </view>

        <!-- 相关新闻推荐 -->
        <view class="related-news">
            <view class="section-title">相关新闻</view>
            <view class="related-item" v-for="item in relatedNews" :key="item.id" @click="goDetail(item.id)">
                <view class="related-title">{{item.title}}</view>
                <view class="related-time">{{item.time}}</view>
            </view>
        </view>

        <!-- 版权声明 -->
        <view class="copyright">
            <view class="statement">（记者 詹姆斯·麦肯锡 华盛顿报道）</view>
            <view class="disclaimer">声明：本文内容综合路透社、彭博社报道，仅用于信息传播，如有版权问题请联系管理员。</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            relatedNews: [
                {
                    id: 1,
                    title: "中美经贸高层近期频繁互动 释放哪些信号？",
                    time: "2025-04-20 14:30"
                },
                {
                    id: 2,
                    title: "分析人士：降低关税或缓解美国通胀压力",
                    time: "2025-04-18 11:20"
                },
                {
                    id: 3,
                    title: "中国对美出口连续三个月增长 贸易结构持续优化",
                    time: "2025-04-15 09:05"
                }
            ]
        };
    },
    methods: {
        goDetail(id) {
            uni.navigateTo({
                url: `/pages/detail/detail?id=${id}`
            });
        }
    },
    onLoad(options) {
        // 这里可以根据options.id获取新闻详情数据
        // 模拟从API获取数据
        // this.fetchNewsDetail(options.id);
    }
};
</script>

<style lang="scss">
.detail-container {
    padding: 20rpx 30rpx;
    background: #fff;
    color: #333;
    line-height: 1.8;
    font-size: 32rpx;

    .article-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 30rpx;
        margin-bottom: 30rpx;

        .title {
            font-size: 44rpx;
            font-weight: bold;
            line-height: 1.4;
            margin-bottom: 20rpx;
            color: #222;
        }

        .subtitle {
            font-size: 34rpx;
            color: #666;
            margin-bottom: 30rpx;
        }

        .meta-info {
            display: flex;
            justify-content: space-between;
            font-size: 28rpx;
            color: #999;

            .source {
                color: #d81e06; // 路透社红色
            }
        }
    }

    .article-content {
        .lead {
            font-weight: bold;
            margin-bottom: 30rpx;
        }

        .paragraph {
            text-indent: 2em;
            margin-bottom: 30rpx;
            text-align: justify;
        }

        .content-image {
            width: 100%;
            border-radius: 8rpx;
            margin: 20rpx 0;
        }

        .image-caption {
            font-size: 28rpx;
            color: #666;
            text-align: center;
            margin-bottom: 30rpx;
        }
    }

    .related-news {
        margin-top: 50rpx;
        border-top: 1px solid #eee;
        padding-top: 30rpx;

        .section-title {
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 30rpx;
            color: #d81e06;
        }

        .related-item {
            padding: 20rpx 0;
            border-bottom: 1px solid #f5f5f5;

            .related-title {
                font-size: 32rpx;
                margin-bottom: 10rpx;
            }

            .related-time {
                font-size: 26rpx;
                color: #999;
            }
        }
    }

    .copyright {
        margin-top: 50rpx;
        padding-top: 30rpx;
        border-top: 1px solid #eee;
        font-size: 28rpx;
        color: #999;

        .statement {
            margin-bottom: 20rpx;
            color: #666;
        }

        .disclaimer {
            line-height: 1.6;
        }
    }
}
</style>